
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Flask-Demo" />
        <meta name="author" content="HelloFlask" />

        <!-- CSS -->
        <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> -->
        <!-- <link href="{{ url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet" crossorigin="anonymous"> -->


        <!-- jQuery and JavaScript Bundle with Popper -->
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
        <!-- <script src="{{ url_for('static',filename='js/jquery.slim.js') }}"  crossorigin="anonymous"></script> -->

        
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script> -->
        <!-- <script src="{{ url_for('static',filename='js/bootstrap.bundle.min.js') }}"  crossorigin="anonymous"></script> -->
    
        {# 块标题 #}
        <title>{% block title %} flask-apps 首页 {% endblock %}</title>

		{#块样式，使用bootstrap.load_css()加载bootstrap的css资源#} 
        {% block style %} {{ bootstrap.load_css() }} 
            <style> 
                #myfooter{
                    text-align: center;
                    /*background-color: lightgray;*/
                    font-size: 14px;      
                    color: lightgray;              
                }
                #mainpage {
                    background-color: burlywood;
                    margin: 0 auto;
                    text-align: center;
        
                }

                #container {
                    width:80%;
                }
          
            </style>           
        {% endblock %}
	</head>

	<body id="mainpage">
		{#块导航栏#} 
        {% block navbar %} 
        <div id="container">
            {# navbar navbar-expand-lg navbar-light bg-light        navbar navbar-dark bg-dark #}
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">Cycle个人博客</a>
                    </div>
                   
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active"><a class="nav-link" href="{{ url_for('user.index')}}">首页 <span class="sr-only">(current)</span></a></li>
                            <li class="nav-item"><a class="nav-link" href="#">关于我</a></li>

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                                    文章分类
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="">科技</a>                            
                                    <div class="dropdown-divider"></div>{# 分割线 #}
                                    <a class="dropdown-item" href="">慢生活</a>
                                    <div class="dropdown-divider"></div>{# 分割线 #}
                                    <a class="dropdown-item" href="">随笔</a>
                                </div>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="#">我的相册</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">留言板</a></li>
                        </ul>

                        <form class="navbar-form navbar-left" action="">
                            <div class="form-group " style="display:flex;">
                                <input   type="text" class="form-control" placeholder="请输入关键字">  
                                <button  type="submit" class="btn btn-default">搜索</button> 
                                                                                    
                            </div>                                 
                        </form>

                        <ul class="nav navbar-nav navbar-right">
                            {% if user %}
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
                                        aria-haspopup="true" aria-expanded="false">欢迎!   {{ user.username }}<span class="caret"></span></a>
                                    
                                    <ul class="dropdown-menu">
                                        <li><a href="{{ url_for('user.user_center') }}">用户中心</a></li>                        
                                        <li role="separator" class="divider"></li>
                                        <li><a href="{{ url_for('user.logout') }}">退出</a></li>
                                        
                                    </ul>
                                </li>                                                                 
                            {% else %}
                                <li style="margin-right:10px;"><a href="{{ url_for('user.login') }}">登录</a></li>
                                <li style="margin-left:10px;"><a href="{{ url_for('user.register') }} ">注册</a></li>                    
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        {% endblock %} 

        {# 子页面需要填充 块内容#} 
        {% block content %} 
        
        {% endblock %} 
        

         {#块底部内容#}
         <hr>
         <footer class="text-center">
            {% block footer %} 
                <small>
                    @2024 <a href="" title='python-flask-app'>python-flask</a> 版权所有
                </small>
             
            {% endblock %}
         </footer>


        {#块JavaScript ，使用bootstrap.load_js()加载bootstrap的JavaScript资源#}
         {% block script %} {{ bootstrap.load_js() }}

         
         {% endblock %}
		
	</body>
</html>

